<!--
 * @Author: panda
 * @Date: 2022-05-18 10:07
 * @Description: 视频侧边排行榜组件
-->
<template>
  <el-table class="el-table" :data="rankList" style="width: 100%">
    <el-table-column
      class="a"
      prop="title"
      label="排行榜"
      width="300"
      show-overflow-tooltip
    >
      <template #default="scope">
        <router-link
          target="_blank"
          :to="{ path: '/video/' + scope.row.id }"
          class="rankList"
        >
          {{ scope.row.title }}
          <!-- <a target="_blank">{{ scope.row.title }}</a> -->
          <!-- <a href="#" target="_blank" class="rankList">{{ scope.row.title }}</a> -->
        </router-link>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { toRefs } from "vue";
// import {HotTitle} from "@/api/model/video"

export default {
  name: "RankList",
  props: {
    rankList: Array,
  },
  setup(props) {
    return {
      /* tableData: [
        { id: "91", title: "没有人希望我赢，所以我不能输哈哈哈哈哈哈哈哈" },
        { id: "91", title: "没有人希望我赢，所以我不能输" },
        { id: "91", title: "没有人希望我赢，所以我不能输" },
        { id: "91", title: "没有人希望我赢, 所以我不能输哈哈哈哈哈h哈哈哈" },
        { id: "91", title: "没有人希望我赢，所以我不能输" },
        { id: "91", title: "没有人希望我赢，所以我不能输" },
        { id: "91", title: "没有人希望我赢，所以我不能输" },
        { id: "91", title: "没有人希望我赢，所以我不能输" },
      ], */
      ...toRefs(props),
    };
  },
};
</script>

<style>
.el-table__cell {
  border-bottom: none !important;
}

.el-table ::before {
  display: none !important;
}

th {
  font-size: 22px;
  /* font.css-weight: 400; */
}

.rankList {
  text-decoration: none;
  color: #000;
}
</style>
